<template>
	<div class="center_right_exam">
		<div class="center_rightlabel_navs">
			<div @click="changeType(item)" :class="paperType == item.value?'active':''" class="center_rightlabel_nav" v-for="item in paperTypes">{{item.name}}</div>
		</div>
		<div class="center_right">
			<div class="center_rightcont beautifulScroll">
				<div class="clearfix">
					<div class="center_contitem">
						<div class="center_contitem_num">
							<div class="center_contitem_numP1">
								{{dataInfo.paperTotalNumber || 0}}
							</div>
							<div class="center_contitem_numP2">
								累计考试次数
							</div>
						</div>
						<div class="center_contitem_num">
							<div class="center_contitem_numP1">
								{{dataInfo.paperPassNumber || 0}}
							</div>
							<div class="center_contitem_numP2">
								累计及格次数
							</div>
						</div>
						<div class="center_contitem_num">
							<div class="center_contitem_numP1">
								{{dataInfo.paperNoPassNumber || 0}}
							</div>
							<div class="center_contitem_numP2">
								累计未及格次数
							</div>
						</div>
					</div>
					<div class="center_contitem center_contitem_chart">
						<div class="center_conttitle">
							近5次考试成绩趋势
							<el-tooltip class="item" effect="dark" content="异常状态的考试，不在统计范围" placement="right">
								<i class="el-icon-warning-outline"></i>
							</el-tooltip>
						</div>
						<div class="center_contchart" id="study_chart"></div>
					</div>
				</div>
				<div class="center_rightlabel">
					考试记录
				</div>
				<div class="center_rightable">
					<div class="center_rightable_search">
						<el-input placeholder="请输入考试名称" prefix-icon="el-icon-search" v-model="paperName" size='small' style="width:200px;margin: 0 10px 0 0;" clearable/>
						<span class="index_mainsearch_label">考试时间</span>
						<el-date-picker v-model="startEnd" @change='currentChange(1)' type="daterange" value-format='yyyy-MM-dd' size='small' start-placeholder="开始日期" end-placeholder="结束日期" style="width:300px;margin: 0 10px 0 0;" clearabled></el-date-picker>
						<el-button type="primary" @click="currentChange(1)" size='small'>搜索</el-button>
						<el-button type="primary" @click="research" size='small'>重置</el-button>
					</div>
					<el-table :data="dataList" border>
						<el-table-column label="序号" align='center' width='60'>
							<template slot-scope="scope">
								{{scope.$index +1 }}
							</template>
						</el-table-column>
						<el-table-column prop="paperName" label="考试名称" align='center'>
						</el-table-column>
						<el-table-column prop="createTime" label="考试时间" align='center'>
							<template slot-scope="scope">
								{{scope.row.startTime}}<br />-<br />{{scope.row.endTime}}
							</template>
						</el-table-column>
						<el-table-column prop="totalScore" label="总分" align='center'>
						</el-table-column>
						<el-table-column prop="passScore" label="及格分" align='center'>
						</el-table-column>
						<el-table-column prop="score" label="得分" align='center'>
						</el-table-column>
						<el-table-column prop="disabled" label="是否及格" align='center'>
							<template slot-scope="scope">
								<el-tag type='success' v-if='scope.row.score >= scope.row.passScore'>及格</el-tag>
								<el-tag type='danger' v-if='scope.row.score < scope.row.passScore'>不及格</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="duration" label="用时(分钟)" align='center'>
						</el-table-column>
						<el-table-column label="操作" align="center" width='120'>
							<template slot-scope="scope">
								<el-button type="text" @click="openView(scope.row)">查看</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="index_mainpages">
						<el-pagination hide-on-single-page background @current-change="currentChange" :current-page="pageNum" :page-size="pageSize" layout="total,  prev, pager, next, jumper" :total="total">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	import { paperAnswerList, paperNumberStatistic, paperScoreTopFive } from "@/api/paper.js"
	export default {
		data() {
			return {
				paperType: 'SIMULATE',
				paperTypes: [{
					name: '模拟考试',
					value: 'SIMULATE'
				}, {
					name: '正式考试',
					value: 'EXAM'
				}],
				paperName: '',
				startEnd: [],
				dataList: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				dataInfo: {},
				chatInfo: [],
				studyChart: null,
			}
		},
		created() {
			this.getDataInfo()
			this.getDataList()
		},
		mounted() {

		},
		methods: {
			getDataInfo() {
				paperNumberStatistic({
					paperType: this.paperType
				}).then(res => {
					this.dataInfo = res.data || {}
				})
				paperScoreTopFive({
					paperType: this.paperType
				}).then(res => {
					this.chatInfo = res.data || [];
					this.setChart();
				})
			},
			setChart() {
				var paperName = [];
				var score = [];
				this.chatInfo.map(item => {
					paperName.push(item.paperName);
					score.push(item.score ? item.score : 0);
				})
				var option = {
					tooltip: {
						trigger: 'axis',
						formatter: '{b} <br/>得分: {c}分'
					},
					toolbox: {
						show: true,
						orient: 'vertical',
						left: 'right',
						top: 'center',
					},
					grid: {
						bottom: '40px',
						left: '35px',
						right: '30px',
						top: '10px',
					},
					xAxis: {
						type: 'category',
						data: paperName,
					},
					yAxis: {
						type: 'value',
						minInterval: 20,
						axisTick: {
							lineStyle: {
								width: 0
							}
						},
					},
					series: [{
						name: '考试成绩趋势',
						data: score,
						type: 'line',
						color: '#3E73EF',
					}]
				};
				this.$nextTick(() => {
					if(!this.studyChart) {
						this.studyChart = echarts.init(document.getElementById('study_chart'));
					}
					this.studyChart.setOption(option)
				})
			},
			openView(item) {
				this.$router.push({
					name: 'examresult',
					query: {
						paperId: item.paperId,
					}
				})
			},
			changeType(item) {
				if(this.paperType != item.value) {
					this.paperType = item.value
					this.research()
					this.getDataInfo()
				}
			},
			research() {
				this.startEnd = [];
				this.paperName = '';
				this.currentChange(1)
			},
			currentChange(pageNum) {
				this.pageNum = pageNum;
				this.getDataList();
			},
			getDataList() {
				paperAnswerList({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					paperName: this.paperName,
					paperType: this.paperType,
					startTime: this.startEnd && this.startEnd.length == 2 ? this.startEnd[0] : null,
					endTime: this.startEnd && this.startEnd.length == 2 ? this.startEnd[1] : null,
				}).then(res => {
					this.dataList = res.data.list;
					this.total = res.data.total;
				})
			},
		},
	}
</script>